<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">活动配置</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true" size='small'>
                    <el-form-item label="活动code:">
                        <el-input size="small" v-model.trim="searchObj.code" placeholder="活动code" clearable style="width:150px;"/>
                    </el-form-item>
                    <el-form-item label="活动名称:">
                        <el-input size="small" v-model.trim="searchObj.name" placeholder="活动名称" clearable style="width:150px;"/>
                    </el-form-item>
                    <el-form-item label="活动状态:">
                        <el-select v-model="searchObj.status" size='small' placeholder="选择状态" style="width: 140px" clearable>
                            <el-option v-for="(value,key) in upDownMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDatalist" icon="el-icon-search" size='small'>查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 数据表格 -->
                <el-table :data="tableData" border v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column label="序号" width="70">
                        <template slot-scope="scope">
                            <el-popover trigger="click" placement="top">
                                <span>autoId: {{ scope.row.autoId }}</span>
                                <div slot="reference">
                                    {{scope.$index + 1}}
                                </div>
                            </el-popover>
                        </template>                    
                    </el-table-column>
                    <el-table-column prop="code" label="活动名称" />
                    <el-table-column prop="name" label="活动名称" />
                    <el-table-column prop="startTime" label="开始时间" />
                    <el-table-column prop="endTime" label="结束时间" />
                    <el-table-column label="状态" >
                        <template slot-scope="scope">
                            {{upDownMap[scope.row.status]}}
                        </template>
                    </el-table-column>                    
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="addeditDailog('edit',scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="50%" @close="closeDailog" @open="openDailog">
                    <el-form>
                        <el-form-item label="活动code:" :label-width="formLabelWidth">
                            <el-input :disabled="codeDisabled" size="small" v-model.trim="dailogFrom.code" placeholder="活动名称" style="width:150px;"/>
                        </el-form-item>
                        <el-form-item label="活动名称:" :label-width="formLabelWidth">
                            <el-input size="small" v-model.trim="dailogFrom.name" placeholder="活动名称" style="width:150px;"/>
                        </el-form-item>
                        <el-form-item label="活动时间:" :label-width="formLabelWidth">
                            <el-date-picker
                                v-model="dateValue"
                                @change="dateChange"
                                type="datetimerange"
                                size="small"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :clearable="timeClearable"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width:370px;"/>
                        </el-form-item>
                        <el-form-item label="状态:" :label-width="formLabelWidth">
                            <el-select v-model="dailogFrom.status" size='small' placeholder="选择状态" style="width: 150px">
                                <el-option v-for="(value,key) in upDownMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注:" :label-width="formLabelWidth">
                            <el-input size="small" v-model.trim="dailogFrom.remark" placeholder="备注" clearable style="width:150px;"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            closeOnClickModal: false,

            // 查询条件
            searchObj: {
                code: "",
                name: "",
                status: ""
            },

            // 数据列表
            tableData: [],
            listLoading: false,

            // 上下线对应map
            upDownMap: {
                "0": "下线",
                "1": "上线"
            },

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",
            dailogFrom: {
                code: "", // 活动code
                name: "", // 活动名称
                startTime: "", //开始时间
                endTime: "", //结束时间
                status: "0", // 活动状态
                remark: "" //备注
            },

            codeDisabled: false, // 活动code框禁点
            // 时间框
            dateValue: "",
            timeClearable: false
        };
    },
    methods: {
        // 打开弹窗
        openDailog() {
            this.dialogType === "add"
                ? (this.dialogTitle = "新增活动")
                : (this.dialogTitle = "编辑活动");
        },
        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
            } else {
                this.dialogType = "edit";
                this.codeDisabled = true;
                // this.dailogFrom = Object.assign({}, rowData);
                for (const key in rowData) {
                    this.dailogFrom[key] = rowData[key].toString();
                }
                // 时间反显
                this.dateValue = [
                    this.dailogFrom.startTime,
                    this.dailogFrom.endTime
                ];
            }
            this.dialogFormVisible = true;
        },
        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.dailogFrom = {
                code: "", // 活动code
                name: "", // 活动名称
                startTime: "", //开始时间
                endTime: "", //结束时间
                status: "0", // 活动状态
                remark: "" //备注
            };
            // 时间选择框清空
            this.dateValue = [];
        },

        // 时间change
        dateChange(date) {
            if (date != null) {
                this.dailogFrom.startTime = date[0];
                this.dailogFrom.endTime = date[1];
            } else {
                this.dailogFrom.startTime = "";
                this.dailogFrom.endTime = "";
            }
        },

        // 新增/编辑 确定
        confirm() {
            if (!this.dailogFrom.code && this.dialogType == "add") {
                this.$message.error("请输入活动code!");
                return false;
            }
            if (!this.dailogFrom.name) {
                this.$message.error("请输入活动名称!");
                return false;
            }
            if (!this.dailogFrom.startTime) {
                this.$message.error("请选择生效时间!");
                return false;
            }
            console.log(this.dailogFrom);
            if (this.dialogType === "add") {
                // 添加数据
                this.addData();
            } else if (this.dialogType === "edit") {
                // 更新数据
                this.updateData();
            }
        },
        // 获取数据列表
        getDatalist() {
            this.listLoading = true;
            api.getActivityList(this.searchObj).then(res => {
                this.listLoading = false;
                this.tableData = res.data;
            });
        },
        // 添加数据
        addData() {
            api.addActivity(this.dailogFrom).then(() => {
                this.$message.success("新增成功!");
                // 获取数据列表
                this.getDatalist();
                this.dialogFormVisible = false;
            });
        },
        // 更新数据
        updateData() {
            api.updateActivity(this.dailogFrom).then(() => {
                this.$message.success("更新成功!");
                // 获取数据列表
                this.getDatalist();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 获取数据列表
        this.getDatalist();
    }
};
</script>

<style>
</style>
